import React from "react";

class Square extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        console.log(this.props.index)
        this.props.onIndex(this.props.index)
    }

    render() {
        const isRed = this.props.line && this.props.line.includes(this.props.index)

        return (
            <button
                onClick={this.handleClick}
                className={`square ${isRed ? 'red' : ''}`}
            >
                {this.props.val}
            </button>
        )
    }
}

export default Square


